feat(design-system): add Input, Textarea component and stories #2246
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
karrui
force-pushed
the
form-v2/input-component
branch
from
5f5f818 to
4512c81
Compare
used to automatically resize text areas
karrui
changed the title
This is used in by Chakra's `InputGroup` component to remove border radii when paired with `InputLeftAddon` or `InputRightAddon`
this removes the need to have a per-input component memoization theme override
since they follow input state, no reason to not include those
also removed redundant isSuccess check
so react won't throw an error on the console
mantariksh
reviewed
Jul 5, 2021
Comment on lines
+33
to
+35
| if (!props.isSuccess) { | ||
| return <ChakraInput ref={ref} {...inputProps} sx={inputStyles.field} /> | ||
| } |
There was a problem hiding this comment.
sorry why are we doing this?
There was a problem hiding this comment.
As per the comments in the non-success case, InputGroup is required for InputRightElement to retrieve the correct style props and will crash if not included.
However, since we just display the normal input on success, we do not need that special requirement and can just return the input as per normal
# Conflicts: # frontend/src/assets/icons/BxsCheckCircle.tsx # frontend/src/theme/components/index.ts
# Conflicts: # frontend/package-lock.json # frontend/package.json # frontend/src/theme/components/index.ts
wrong indentation sorry
mantariksh
approved these changes
Jul 7, 2021
| boxShadow: 'none', | ||
| borderColor: 'primary.500', | ||
| borderWidth: '2px', | ||
| outline: (props: Record<string, any>) => { |
seaerchin
reviewed
Jul 8, 2021
Comment on lines
+40
to
+45
| <InputGroup> | ||
| <ChakraInput ref={ref} {...inputProps} sx={inputStyles.field} /> | ||
| <InputRightElement sx={inputStyles.success}> | ||
| <Icon as={BxsCheckCircle} /> | ||
| </InputRightElement> | ||
| </InputGroup> |
There was a problem hiding this comment.
Could i clarify on why we chose to do this? Testing on chakra's website seems to suggest that there are styling conflicts and consumers of our component might mistakenly think that this is a base Input in success state and compose it as part of an InputGroup only to discover that it's actually not.
This was referenced Oct 4, 2022
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
This PR adds the
components/Inputcomponent alongside with their stories. A Playground story is also created to check how it could work with React hook form.Closes #2002
Solution
Features:
Before & After Screenshots
In storybook